<template>
  <div class="container">
    <div
      class="logo"
      @click="$router.push('/')"
    >
      <img class="logo-img" src="@/assets/logo.png">
      <h3 class="logo-text">
        <!-- {{ $t("成本管理中心") }} -->
        <%= projectName %>
      </h3>
    </div>
    <div class="warpper">
      <div class="nav-tab">
        <ElMenu
          v-if="isUseNavMenu"
          v-bind="navMenuStyle"
          :default-active="defaultActive"
          router
        >
          <!-- 首屏默认路由为首个第一级路由(不包含hideTab的路由项) -->
          <template v-for="item in $router.options.routes">
            <ElMenuItem
              v-if="!item.meta.hideTab"
              :key="item.name"
              :index="item.path"
            >
              {{ item.meta.title }}
            </ElMenuItem>
          </template>
        </ElMenu>
      </div>
      <div class="nav-action">
        <% if (darkMode) { %>
        <div
          class="theme-mode"
          @click="changeTheme(theme === 'light' ? 'dark' : 'light')"
        >
          <Icon
            icon="twemoji:sun"
            class="theme-icon"
            :class="theme === 'light' && 'active'"
          />
          <Icon
            icon="twemoji:first-quarter-moon-face"
            class="theme-icon"
            :class="theme === 'dark' && 'active'"
          />
        </div>
        <% } %>


        <ElMenu
          v-bind="navMenuStyle"
          :default-active="currentLang"
          @select="handleLang"
        >
          <div class="style-ctrl no-arrow">
            <ElSubmenu
              index="1"
              :popper-append-to-body="false"
            >
              <template slot="title">
                <div class="sub-menu-title-warpper">
                  <Icon
                    icon="mdi:translate"
                    style="font-size: 18px"
                  />
                </div>
              </template>
              <ElMenuItem
                v-for="item in allLangs"
                :key="item.value"
                :index="item.value"
              >
                {{ item.lang }}
              </ElMenuItem>
            </ElSubmenu>
          </div>
        </ElMenu>

        <ElMenu v-bind="navMenuStyle">
          <div class="style-ctrl no-active no-arrow">
            <ElSubmenu
              index="2"
              :popper-append-to-body="false"
            >
              <template slot="title">
                <div class="sub-menu-title-warpper">
                  <Icon
                    icon="mdi:help-circle-outline"
                    style="font-size: 20px"
                  />
                  <span style="margin-left: 5px">{{ $t("帮助") }}</span>
                </div>
              </template>
              <ElMenuItem index="1">
                帮助选项1
              </ElMenuItem>
              <ElMenuItem index="2">
                帮助选项2
              </ElMenuItem>
            </ElSubmenu>
          </div>
        </ElMenu>

        <ElMenu v-bind="navMenuStyle">
          <div class="style-ctrl no-active no-arrow">
            <ElSubmenu
              index="2"
              :popper-append-to-body="false"
            >
              <template slot="title">
                <div class="sub-menu-title-warpper">
                  <img
                    class="avatar"
                    src="@/assets/defaultAvatar.png"
                  >
                </div>
              </template>
              <ElMenuItem index="1">
                用户选项1
              </ElMenuItem>
              <ElMenuItem index="2">
                用户选项2
              </ElMenuItem>
            </ElSubmenu>
          </div>
        </ElMenu>
      </div>
    </div>
  </div>
</template>

<script>
// import logo from '@/assets/logo-text.svg'
import { HOME_PAGE } from '@/router/config'
import { allLangs } from '@/common/utils/i18n'
<% if (darkMode) { %>
import _ from 'lodash'
<% } %>

export default {
  name: 'NavBar',
  data () {
    return {
      // logo,
      navMenuStyle: {
        mode: 'horizontal',
        backgroundColor: 'transparent'
      },
      isUseNavMenu: process.env.VUE_APP_USE_NAV_MENU === 'true',
      allLangs,
      currentLang: localStorage.getItem('lang')
    }
  },
  computed: {
    <% if (darkMode) { %>
    theme () {
      return this.$store.state.user.theme
    },
    <% } %>

    defaultActive () {
      let pathName
      if (process.env.VUE_APP_ROUTER_MODE === 'hash') {
        pathName = window.location.hash.substring(1)
      } else {
        pathName = window.location.pathname
      }
      let defaultRoute = '/'

      if (pathName !== '/') {
        const matched = this.$route.matched
        let i = 0
        while (i !== matched.length) {
          if (matched.at(-i).meta.hideTab) {
            i++
          } else {
            defaultRoute = matched.at(-i).path
            break
          }
        }
        return defaultRoute
      }
      return HOME_PAGE
    }
  },
  methods: {
    handleLang (lang) {
      if (lang === this.currentLang) return
      this.changeLang(lang)
    },
    <% if (darkMode) { %>
    changeTheme: _.throttle(function (newTheme) {
      this.$store.commit('user/setTheme', newTheme)
    }, 550)
    <% } %>
  }
}
</script>

<style lang="scss" scoped>
$navRootMenuHoverBg: #7f98c62f;

.container {
  display: flex;
  align-items: center;
  height: $navBarHeight;
  box-sizing: border-box;
  padding: 0 20px;
  color: #fff;
  transition: background-color $layoutAnimationTime;
  background-color: var(--navBarBgColor);
}

.logo {
  height: $navBarHeight;
  display: flex;
  align-items: center;
  cursor: pointer;
  width: $asideWidth - 20px; //左padding固定20
  .logo-img {
    height: 26px;
  }
  .logo-text {
    flex-grow: 1;
    padding-left: 10px;
    color: #fff;
    transition: color $layoutAnimationTime;
    white-space: nowrap;
  }
}

/deep/ .el-menu {
  border: none !important;
  // 需要指定菜单项的高度，否则就会固定在默认的60px，和navBar的高度不一致
  .el-menu-item,
  .el-submenu__title {
    height: $navBarHeight !important;
    line-height: $navBarHeight !important;
    border: none !important;
    &:hover {
      background-color: $navRootMenuHoverBg !important;
    }
    // &.is-active {
    //   background-color: #31405e !important;
    // }
  }
}

// 上面的高度设置会影响到弹出二级菜单的高度，又需要设置回去默认的36px
.el-menu--popup {
  .el-menu-item,
  .el-submenu__title {
    height: 36px !important;
    line-height: 36px !important;
  }
}

.nav-tab .el-menu-item {
  color: #fff !important;
  &:hover,
  &.is-active {
    background-color: $navRootMenuHoverBg !important;
  }
}

.warpper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
  user-select: none;
}

.sub-menu-title-warpper {
  display: flex;
  align-items: center;
  padding-right: 20px; // 默认的箭头定位有问题，要再加20px
  height: 100%;
  color: #fff;

  .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    vertical-align: middle;
  }
}

// 加上no-arrow类名后不显示箭头
.style-ctrl.no-arrow {
  .sub-menu-title-warpper {
    padding-right: 0;
  }
  /deep/.el-submenu__icon-arrow {
    display: none !important;
  }
}

/deep/.el-scrollbar__view {
  max-height: 280px;
}

<% if (darkMode) { %>
.theme-mode {
  position: relative;
  width: 50px;
  height: $navBarHeight;
  transition: background-color 300ms;
  cursor: pointer;
  font-size: 22px;
  overflow: hidden;

  &:hover {
    background-color: $navRootMenuHoverBg;
  }

  .theme-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transition: transform 500ms;
    transform-origin: 0 40px;
    transform: translate(-50%, -50%) rotate(180deg);
    &.active {
      transform: translate(-50%, -50%);
    }
  }
}
<% } %>

</style>

<style lang="scss">
// 在scoped里面选不到propper
.nav-action {
  display: flex;

  .style-ctrl {
    .el-menu--horizontal {
      background-color: #fff;
      transform: translateY(6px);
      border-radius: 5px;

      .el-menu-item,
      .el-submenu__title {
        color: #000 !important;
        &:hover {
          background-color: #e9f7fd !important;
        }
        &.is-active {
          // background-color: #d7f1fd !important;
          color: var(--primaryColor) !important;
          font-weight: bold;
        }
      }

      .el-menu--popup {
        margin-top: 0;
      }
    }

    // 加上no-active类名后，无激活背景色
    &.no-active .el-menu--horizontal .el-menu-item.is-active {
      background-color: transparent !important;
      font-weight: normal;
      color: #000 !important;
      &:hover {
        background-color: #e9f7fd !important;
        // color: #000 !important;
      }
    }
  }
}
</style>
